<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="container">
            组件应用效果<br>
            <Hello></Hello>
             <Hello></Hello>
              <Hello></Hello>
        </div>
        <script>
        
        //全局注册组件  必须前new Vue之前
        Vue.component("Hello",{
            data:function(){
                return {
                    //定义数据属性 
                    name:"张三"
                }
            },
            template:"<span>名称:{{name}}</span>"
        });
        
        new Vue({
            el:"#container"
        });
        
        </script>
    </body>
</html>
